<!--
 * @Author: your name
 * @Date: 2021-08-16 21:07:56
 * @LastEditTime: 2021-08-24 00:23:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hqbAdmin\src\components\analyse\channelAnalyse.vue
-->
<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>统计分析</el-breadcrumb-item>
      <el-breadcrumb-item>渠道统计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="3">
          <!-- <el-input
            v-model="queryParms.channelCode"
            placeholder="渠道名称"
          ></el-input> -->

            <el-select
                v-model="queryParms.channelCode"
                filterable
                default-first-option
                clearable 
                placeholder="请选择渠道">
                <el-option
                  v-for="item in queryBindData.channelData"
                  :key="item.channelCode"
                  :label="item.channelName"
                  :value="item.channelCode">
                </el-option>
              </el-select>
        </el-col>
        <!-- <el-col :span="3">
					<el-input v-model="seachlist.loanNo" placeholder="借据号"></el-input>
				</el-col> -->

        <el-col :span="17">
          <el-date-picker
            v-model="time"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="changeDate"
          >
          </el-date-picker>
        &nbsp;&nbsp;
          <el-button type="primary" @click="listChannelAnalyse">搜索</el-button>
          <!-- <el-button @click="clear">清空</el-button> -->
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-col>
      </el-row>
      <el-table :data="listData" border stripe show-summary :summary-method="getSummaries"  @sort-change="sortChange"
           >
        <el-table-column label="日期" prop="time" width="200px"  sortable="custom" ></el-table-column>
        <el-table-column label="渠道名称" prop="channelName"></el-table-column>
        <el-table-column label="PV" prop="pv"  sortable="custom"></el-table-column>
        <el-table-column label="UV" prop="uv"  sortable="custom"></el-table-column>
        <el-table-column label="注册" prop="register"  sortable="custom"></el-table-column>
        <el-table-column label="注册率" prop="registerRatio"></el-table-column>
        <el-table-column label="扣量后注册数" prop="registerKlh"  sortable="custom"></el-table-column>
        <el-table-column label="激活" prop="activate"  sortable="custom"></el-table-column>
        <el-table-column label="激活率" prop="activateRatio" ></el-table-column>
        <el-table-column label="租超点击" prop="loanClick"  sortable="custom"></el-table-column>
        <el-table-column
          label="租超点击率"
          prop="loanClickRatio"
        ></el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParms.pageCount"
        :page-size="queryParms.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- <div style="text-align: right; font-size: 16px; margin-top: 0.625rem">
        总金额：{{ totalLoanAmount | NumFormat }}元
      </div> -->
    </el-card>
  </div>
</template>


<script>
import axios from 'axios'
export default {
  name: "channelAnalyse",
  data() {
    return {
      queryBindData:{
         channelData:[]
      },
      queryParms: {
        channelCode: "",
        startTime: "",
        endTime: "",
        pageCount: 1,
        pageSize: 10,
        sortCol:"statisticsTime",
				sort:"desc"
      },
	    time:[],
      listData: [],
      total: 0,
    };
  },
  created() {
    // this.listChannelAnalyse();
    this.getChannelList();
  },
  methods: {

    async getChannelList(){
      
				this.channellist={'pageSize':99,'pageCount':1,"isOpen":'1'}
				const {data:res} = await this.$http.post('/outLinkChannel/listChannel',this.channellist)
				this.queryBindData.channelData = res.data.records
				
			},
    async listChannelAnalyse() {
      if(this.queryParms.startTime==""||this.queryParms.endTime==""){
          this.$message.error("查询日期不可为空！");
          return;
      }
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      const { data: res } = await this.$http.post(
        "/outLinkChannel/channelAnalyse",
        this.queryParms
      );
      setTimeout(() => {
        loading.close();
      }, 500);
      // console.log(res);
      this.listData = res.data.records;
      this.total = res.data.total;
    },
    async exportExcel(){
      if(this.queryParms.startTime==""||this.queryParms.endTime==""){
          this.$message.error("查询日期不可为空！");
          return;
      }
      
       const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      
       await this.$http({
          method: 'post',
          url: '/outLinkChannel/channelAnalyseExport',
          data:this.queryParms,
          responseType: 'blob'
          }).then(response => {
            this.download(response.data)
            
              setTimeout(() => {
              loading.close();
            }, 500);
          }).catch((error) => {
      });
    },
    download (data) {
      if (!data) {
        return
      }
      let url = window.URL.createObjectURL(new Blob([data]))
      let link = document.createElement('a')
      link.style.display = 'none'
      link.href = url
      link.setAttribute('download', '渠道统计.xls')
      document.body.appendChild(link)
      link.click()
  },
    changeDate() {
      this.queryParms.startTime = this.time[0];
      this.queryParms.endTime = this.time[1]; 
    },   
    handleSizeChange(val) {
      this.queryParms.pageSize = val;
      this.listChannelAnalyse();
    },
    handleCurrentChange(val) {
      this.queryParms.pageCount = val;
      this.listChannelAnalyse();
    },
    getSummaries(param){
       const { columns, data } = param;
       console.info(param);
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }
          if(index===1||index===5||index===7||index===9){
            sums[index] = '';
            return;
          }
          const values = data.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
            sums[index] += '';
          } else {
            sums[index] = '';
          }
        });

        return sums;
    },sortChange( {column, prop, order} ){
      if(prop==="time"){
        this.queryParms.sortCol="statisticsTime";
      }else{
         this.queryParms.sortCol=prop;
      }
        this.queryParms.sort=order=="descending"?"desc":"asc";
        this.queryParms.pageCount=1;
        this.listChannelAnalyse();
    }
  },
};
</script>

<style>
</style>